<template>

	<view>
		<navBar class="text">
			<template slot='left'>
				<view @click="switchingWarehouse()">
					<text>{{stashInfo.ware_name}}</text>
					<text class="cuIcon-order elementRotate "></text>
				</view>
			</template>
			<template class="centerText" slot='center'>
				<view class="">
					{{ new Date()|getWeek}}
				</view>
				<view class="">
					{{ $u.timeFormat(new Date()) }}
				</view>
			</template>
		</navBar>
		<!-- <u-notice-bar :text="notification" mode="closable"></u-notice-bar> -->
		<!-- 仓库数据 -->
		<view class="warehouse_data">
			<view class="warehouse_data_item" v-for="item,index in warehouseData" :key="index">
				<view class="top_number" :style="{color:item.color}">
					{{item.number}}
				</view>
				<view class="bottom_text">
					{{item.text}}
				</view>
			</view>
		</view>
		<!-- 常用工具 -->
		<view class="common_tool public_style ">
			<view class="title">
				常用工具
			</view>
			<view class="tools">
				<view v-if='item.role.includes(userInfo.user_role)' class="tool_item" v-for="item,index in commonTools "
					:key="index" @click="jumpOtherPage(item.id)">
					<view class="top_img" :style="{backgroundColor:item.bgc}">
						<image :src="item.img" mode=""></image>
					</view>
					<view class="bottom_text">
						{{item.text}}
					</view>
				</view>
			</view>
		</view>

		<view class="share " v-if="userInfo.user_role==2">
			<view @click="goOtherPage(item.id)" class="item" v-for="item in shareData" :key="item.id">
				<view class="left">
					<image :src=item.img mode=""></image>
					<view style="display: flex; align-items: center;">{{item.text}}
						<view v-if="item.text == '库存预警' && warehouseData[2].number !=0 " class="point"></view>
					</view>
				</view>
				<view style="display: flex; align-items: center;">
					<view style="margin-right: 10rpx;" v-if="item.text == '库存预警' && warehouseData[2].number !=0 "
						class="">
						{{warehouseData[2].number}}项
					</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
		</view>
		<!-- 切换仓库弹出层 -->
		<switchingWarehousrPopup :showPopup.sync="showPopup"></switchingWarehousrPopup>
	</view>
</template>

<script>
	import navBar from '@/components/navBar.vue'
	import switchingWarehousrPopup from './components/switchingWarehousrPopup.vue'
	import {
		mapGetters
	} from 'vuex'
	import {
		putInAndOutAndWarningApi
	} from '@/api/receiveAndBorrow.js'
	export default {

		data() {
			return {
				notification: '感谢您使用万物云仓，程序持续优化中……敬请期待',
				warehouseData: [{
						id: 1,
						number: 0,
						text: '今日出库',
						color: '#4cd964'
					},
					{
						id: 2,
						number: 0,
						text: '今日入库',
						color: '#007aff'
					},
					{
						id: 3,
						number: 0,
						text: '库存预警',
						color: '#f0ad4e'
					},
					// {
					// 	id: 4,
					// 	number: 0,
					// 	text: '过期预警',
					// 	color: '#dd524d'
					// }
				],
				commonTools: [{
						id: 1,
						img: '/static/images/hwgl.png',
						text: '物料管理',
						bgc: '#4cd964',
						role: [2]
					},
					{
						id: 2,
						img: '/static/images/lysq.png',
						text: '领用申请',
						bgc: '#007aff',
						role: [1, 2]
					},
					{
						id: 3,
						img: '/static/images/jysq.png',
						text: '借用申请',
						bgc: '#f0ad4e',
						role: [1, 2]
					},
					{
						id: 4,
						img: '/static/images/flgl.png',
						text: '分类管理',
						bgc: '#dd524d',
						role: [2]
					},
					{
						id: 5,
						img: '/static/images/ppgl.png',
						text: '品牌管理',
						bgc: '#4cd964',
						role: [2]
					},
					{
						id: 6,
						img: '/static/images/lyjl.png',
						text: '领用记录',
						bgc: '#007aff',
						role: [1, 2]
					},
					{
						id: 7,
						img: '/static/images/jyjl.png',
						text: '借用记录',
						bgc: '#f0ad4e',
						role: [1, 2]
					},
					{
						id: 8,
						img: '/static/images/fastTool.png',
						text: '快捷工具',
						bgc: '#dd524d',
						role: [2]
					},
					{
						id: 9,
						img: '/static/images/ruku.png',
						text: '入库管理',
						bgc: '#4cd964',
						role: [2]
					},
					{
						id: 10,
						img: '/static/images/pandian.png',
						text: '盘点管理',
						bgc: '#007aff',
						role: [2]
					},
				],
				shareData: [{
						id: 1,
						img: '/static/images/chukujilu.png',
						text: '出库记录',
					},
					{
						id: 2,
						img: '/static/images/rukujilu.png',
						text: '入库记录',
					},
					{
						id: 3,
						img: '/static/images/kucunyujing.png',
						text: '库存预警',
					},
					{
						id: 4,
						img: '/static/images/pandianjilu.png',
						text: '盘点记录',
						bgc: '#dd524d'
					}
				],
				showPopup: false
			}
		},
		components: {
			navBar,
			switchingWarehousrPopup
		},
		computed: {
			...mapGetters([
				'stashInfo',
				'userInfo'
			])
		},
		watch: {
			'$store.state.refresh'() {
				this.putInAndOutAndWarning()
			}
		},
		methods: {
			//切换仓库
			switchingWarehouse() {
				this.showPopup = true
			},
			//获取信息
			async putInAndOutAndWarning() {
				const {
					data: {
						data
					}
				} = await putInAndOutAndWarningApi({
					ware_id: this.$store.state.user.stashInfo.ware_id
				})

				// this.warehouseData[0].number = data.in_num
				// this.warehouseData[1].number = data.out_num
				// this.warehouseData[2].number = data.warning_num

				const newData = [data.in_num, data.out_num, data.warning_num];
				newData.forEach((item, index) => {
					this.warehouseData[index].number = item;
				});
			},
			jumpOtherPage(id) {
				switch (id) {
					case 1:
						uni.navigateTo({
							// url: '/commonToolPages/putInStorage/putInStorage'
							url: '/commonToolPages/cargo/cargo'
						})
						break
					case 2:
						uni.navigateTo({
							url: '/commonToolPages/ItemRequisition/ItemRequisition'
						})
						break
					case 3:
						uni.navigateTo({
							url: '/commonToolPages/borrow/borrow'
						})
						break
					case 4:
						uni.navigateTo({
							url: '/commonToolPages/class/class'
						})
						break
					case 5:
						uni.navigateTo({
							url: '/commonToolPages/brand/brand'
						})
						break
					case 6:
						uni.navigateTo({
							url: '/commonToolPages/receivingRecord/receivingRecord'
						})
						break
					case 7:
						uni.navigateTo({
							url: '/commonToolPages/borrowingRecord/borrowingRecord'
						})
						break
					case 8:
						uni.navigateTo({
							url: '/commonToolPages/fastTool/fastTool'
						})
						break
					case 9:
						uni.navigateTo({
							url: '/commonToolPages/putInStorage/putInStorage'
						})
						break
					case 10:
						uni.navigateTo({
							url: '/commonToolPages/InventoryManage/InventoryManage'
						})
						break
				}
			},
			goOtherPage(id) {
				switch (id) {
					case 1:
						uni.navigateTo({
							url: '/commonToolPages/outboundRecord/outboundRecord'
						})
						break
					case 2:
						uni.navigateTo({
							url: '/commonToolPages/putInRecord/putInRecord'
						})
						break
					case 3:
						uni.navigateTo({
							url: '/commonToolPages/InventoryWarning/InventoryWarning'
						})
						break
					case 4:
						uni.navigateTo({
							url: '/commonToolPages/inventoryRecord/inventoryRecord'
						})
						break
				}
			}
		}
	}
</script>

<style lang="scss">
	.text {
		color: #fff;
		font-size: $uni-font-size-base;
	}

	.centerText {
		text-align: center;
	}

	.elementRotate {
		margin-left: 10rpx;
		border-radius: 50%;
		transform: rotate(90deg);
		border: 1rpx solid #fff;
	}

	.warehouse_data {
		box-sizing: border-box;
		display: flex;
		justify-content: space-around;
		margin: 35rpx 0 0 0;
		padding: 30rpx 0;
		background: #fff;
		border-bottom: 1rpx solid $uni-border-color;
		border-radius: 30rpx 30rpx 0 0;

		.warehouse_data_item {
			text-align: center;

			.top_number {
				font-size: 50rpx;
				font-weight: 600;
				margin-bottom: 10rpx;
			}

			.bottom_text {
				font-size: $uni-font-size-base;
				color: $uni-text-color-disable;
			}
		}
	}

	.common_tool {
		padding: 35rpx 0 0;
		background-color: #fff;

		.title {
			font-size: 35rpx;
			font-weight: 600;
			margin: 0 0 20rpx 10rpx;
		}

	}

	.public_style {
		.tools {
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-start;
			/* 左对齐 */
			flex-wrap: wrap;

			/* 换行 */
			.tool_item {
				width: 25%;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				margin-bottom: 40rpx;

				.top_img {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 80rpx;
					height: 80rpx;
					border-radius: 20rpx;
					// background-color: #4cd964;
					margin-bottom: 5rpx;

					image {
						width: 70%;
						height: 70%;
					}
				}

				.bottom_text {
					text-align: center;
					font-size: $uni-font-size-base;
				}

			}
		}
	}

	.share {
		margin-top: 40rpx;
		background-color: #fff;
		margin-bottom: 20rpx;

		.item {
			display: flex;
			padding: 20rpx;
			align-items: center;
			justify-content: space-between;
			font-size: 35rpx;
			border-bottom: 1px solid #f5f5f5;

			.left {
				display: flex;
				align-items: center;

				image {
					width: 60rpx;
					height: 60rpx;
					margin-right: 40rpx;
				}
			}
		}
	}

	.point {
		width: 20rpx;
		height: 20rpx;
		background-color: red;
		margin-left: 30rpx;
		border-radius: 50%;
	}
</style>